<template>
    <view class="wrap-box">
        <view class="selectFlag" :class="is_sel ? 'checked' : 'unChecked'" @click="toggleSel">
            <text class="cuIcon cuIcon-check"></text>
        </view>
    </view>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const emit = defineEmits(['update:modelValue', 'change']);
const props = defineProps({
    modelValue: { required: true },
    id: {
        type: [String, Number],
        default: ''
    },
    is_all: {
        type: Boolean,
        default: false
    }
})
const is_sel = ref(false)

//监听数据
watch(
    () => props.modelValue,
    (value) => {
        is_sel.value = value == 1
    },
    { immediate: true }
);

onMounted(() => {
    is_sel.value = props.modelValue == 1
});


async function toggleSel() {
    is_sel.value = !is_sel.value
    let pdata = {
        type: is_sel.value ? 1 : 2
    }
    if (props.id) {
        pdata['gids'] = [props.id]
    } else {
        pdata['gids'] = []
    }
    let res = await proxy.$api('CartSel', pdata, false, false)

    if (res.code == 0) {
        emit('update:modelValue', is_sel.value ? 1 : 2)
        emit('change')
    }

}


</script>

<style lang="scss" scoped>
.wrap-box {
    width: 80rpx;
    height: 180rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .selectFlag {
        height: 40rpx;
        width: 40rpx;
        border: 1px solid #ececec;
        border-radius: 6rpx;
        text-align: center;
        line-height: 40rpx;
        color: #ffffff;

        .cuIcon {
            color: #fff;
            font-size: 24rpx;
            position: relative;
            top: -4rpx;
        }
    }

    .checked {
        background-color: $main_color;
    }

}
</style>